<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>学习首页</title>
		<link rel="stylesheet" type="text/css" href="../../lib/api.css" />
		<link rel="stylesheet" type="text/css" href="../../lib/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/course/myClass.css" />
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="class-level">
				<span class="class-level-title">我的课程</span>
				<div class="class-level-img">
					<div class="circular-one">
						<div id="myCanvas" class="forth circle">
							<p class="circleChart-one">LEVEL</p>
							<p class="circleChart-two">5</p>
						</div>
					</div>
				</div>
			</div>
			<div class="class-tips">
				<ul class="class-tips-ul">
					<li v-on:click="jumpAllClass()" class="class-tips-li">
						<div class="class-tips-li-svg">
							<img class="class-tips-svg" src="../../lib/svg/class/1.svg" />
						</div>
						<span class="class-tips-name">全部课程</span>
					</li>
					<li v-on:click="jumpClass()" class="class-tips-li">
						<div class="class-tips-li-svg">
							<img class="class-tips-svg" src="../../lib/svg/class/2.svg" />
						</div>
						<span class="class-tips-name">课程表</span>
					</li>
					<li @click="jumpmyCourseware()" class="class-tips-li">
						<div class="class-tips-li-svg">
							<img class="class-tips-svg" src="../../lib/svg/class/3.svg" />
						</div>
						<span class="class-tips-name">我的课件</span>
					</li>
					<li v-on:click="jumpStudyExperience()" class="class-tips-li">
						<div class="class-tips-li-svg">
							<img class="class-tips-svg" src="../../lib/svg/class/4.svg" />
						</div>
						<span class="class-tips-name">学习经历</span>
					</li>
					<li @click="jumpTaped()" class="class-tips-li">
						<div class="class-tips-li-svg">
							<img class="class-tips-svg" src="../../lib/svg/class/5.svg" />
						</div>
						<span class="class-tips-name">录播课</span>
					</li>
				</ul>
			</div>
			<div class="class-function">
				<div class="class-function-div green">
					<img class="class-function-svg-l" src="../../images/1.png" />
					<div class="class-function-c">
						<span class="class-function-title">听力学习</span>
					</div>
					<div class="class-function-c">
						<span class="class-function-title-s">listernern</span>
					</div>
					<div class="class-i">
						<i class="class-function-i fa fa-check-circle"></i>
					</div>
				</div>
				<div class="class-function-div blue">
					<img class="class-function-svg-l" src="../../images/2.png" />
					<div class="class-function-c">
						<span class="class-function-title">口语学习</span>
					</div>
					<div class="class-function-c">
						<span class="class-function-title-s">listernern</span>
					</div>
					<div class="class-i">
						<i class="class-function-i fa fa-check-circle"></i>
					</div>
				</div>
				<div class="class-function-div yellow">
					<img class="class-function-svg-l" src="../../images/3.png" />
					<div class="class-function-c">
						<span class="class-function-title">阅读学习</span>

					</div>
					<div class="class-function-c">
						<span class="class-function-title-s">listernern</span>
					</div>
					<div class="class-i">
						<i class="class-function-i fa fa-check-circle"></i>
					</div>
				</div>
				<div class="class-function-div pruple">
					<img class="class-function-svg-l" src="../../images/4.png" />
					<div class="class-function-c">
						<span class="class-function-title">写作学习</span>

					</div>
					<div class="class-function-c">
						<span class="class-function-title-s">listernern</span>
					</div>
					<div class="class-i">
						<i class="class-function-i fa fa-check-circle"></i>
					</div>
				</div>
			</div>
			<div class="class-hobby">
				<div class="class-hobby-head">
					<i class="class-hobby-svg fa fa-heart"></i>
					<span class="class-hobby-title">我的爱好</span>
					<span class="class-hobby-title-s">MY AIHAO</span>
				</div>
				<ul class="class-hobby-ul">
					<li class="class-hobby-li" :class="{ active: hobbyId == item.id }" v-for="item in hobbyList" v-on:click="choose(item.id)">
						{{item.name}}
					</li>
					<li class="class-hobby-li" @click="add()">
						添加 +
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../../script/api.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../script/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../script/common/config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../script/common/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../lib/circleChart/circle-progress.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../script/course/myClass.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('.forth.circle').circleProgress({
			startAngle: -Math.PI / 4 * 2,
			value: .5,
			lineCap: 'round',
			size: 145,
			thickness: '6',
			fill: {
				color: '#fff'
			}
		});
	</script>

</html>